﻿@model Siser.Web.Models.Pieza

@{
    //DateTime fechaFicha = Model.EquiposPiezas.First().Pieza.Mediciones.First().Fecha;
    DateTime fechaFicha = DateTime.Now;
    string actionUrl = @Url.Action("GetMediciones", "Pieza", new {id = Model != null ? Model.Id : 0});
    
    ViewBag.Title = "Ficha monitoreo en línea";
}
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

@*Validación de usuario, para que no se pueda acceder a la página sin estar logueado *@
@if (@User.Identity.Name == "")
{
    Layout = null;
    <div style="width:800px; font-size:2em; height:500px; text-align:center; margin-top:100px" class="division">
    @Html.ActionLink("Ingrese como usuario válido...", "InicioSesion", "Cuenta")
    </div>
}
else
{
<script src="@Url.Content("~/Scripts/jquery.jqplot.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jqplot.highlighter.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jqplot.dateAxisRenderer.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jqplot.canvasOverlay.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jqplot.canvasAxisLabelRenderer.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jqplot.canvasTextRenderer.min.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/themes/base/jquery.jqplot.min.css")" rel="stylesheet" type="text/css" />

<div id="tag">
    <div class="ficha-monitoreo-borde">
        <div class="ficha-monitoreo-titulo">TAG</div>
    </div>
    <div class="ficha-monitoreo-contenido-imagen">
        <img id="ficha-monitoreo-imagen" src="" alt=""/>
    </div>
</div>
<div id="variables-radiologicas">
    <div class="ficha-monitoreo-borde">
        <div class="ficha-monitoreo-titulo">Variables radiológicas</div>
    </div>
    <div class="ficha-monitoreo-contenido">
        <div style="clear: both; height: 40px;">
            <div style="margin: 0 15px 0 15px; float: left;">
                Distancia<div style="text-align: center;">---</div>
            </div>

            <div style="margin: 0 15px 0 15px; float: left;">
                Dosis recibida<div style="text-align: center;">.</div>
            </div>        

            <div style="margin: 0 15px 0 15px; float: left;">
                Tiempo de exposición<div style="text-align: center;">.</div>
            </div>
        </div>
    
        <div style="clear: both; height: 40px;">
            <div style="margin: 0 10px 0 90px; float: left;">
                Mínimo<div style="text-align: center;">.</div>
            </div>
            
            <div style="margin: 0 10px 0 10px; float: left;">
                Máximo<div style="text-align: center;">.</div>
            </div>
                
            <div style="margin: 0 auto 0 10px; float: left;">
                Promedio<div style="text-align: center;">.</div>
            </div>
        </div>

        <div style="clear: both; height: 40px;">
            <div style="margin: 0 125px 0 125px;">
                Desviación estándar<div style="text-align: center;">.</div>
            </div>
        </div>
    </div>
</div>
<div id="limites-dosis">
    <div class="ficha-monitoreo-borde">
        <div class="ficha-monitoreo-titulo">Limites de dosis</div>
    </div>
    <div class="ficha-monitoreo-contenido">
        <div style="line-height: 40px">
            Dosis uSv/año<span>.</span>
        </div>

        <div style="line-height: 40px">
            Dosis uSv/día<span>.</span>
        </div>
    
        <div style="line-height: 40px">
            Tasa exposición uSv/h<span>.</span>
        </div>
    </div>
</div>
<div id="estado-linea">
    <div class="ficha-monitoreo-borde">
        <div class="ficha-monitoreo-titulo">Estado en línea</div>
    </div>
    <div class="ficha-monitoreo-contenido-estado-linea">
        <div style="line-height: 40px">
            Estado<span>.</span>
        </div>

        <div style="line-height: 40px">
            Medición<span>.</span>
        </div>

        <div style="line-height: 40px">
            Nivel referencia<span>.</span>
        </div>

        <div style="line-height: 40px">
            Puerta<span>.</span>
        </div>

        <div style="line-height: 40px">
            Energía<span>.</span>
        </div>
    </div>
</div>
<div id="grafico">
    <div class="ficha-monitoreo-borde">
        <div class="ficha-monitoreo-titulo">Gráfico</div>
    </div>
    <div class="ficha-monitoreo-contenido-grafico">
        @*<div><label>Tiempo restante: </label><label id="remaining-time"></label></div>*@
        <div style="background-color: #99c6e4; height:200px; width:410px; -moz-border-radius: 10px; -webkit-border-radius: 10px; padding:5px; border: 2.5px solid #999">
            <div id="chart" style="height:200px; width:400px;"></div>
        </div>  
    </div>
</div>
<div id="informacion-equipo">
    <div class="ficha-monitoreo-borde">
        <div class="ficha-monitoreo-titulo">Información detector</div>
    </div>
    <div class="ficha-monitoreo-contenido-informacion">
        <div style="clear: both; height: 30px;">
            <div style="margin: 0 15px 0 120px; float: left;">
                Tipo detector<div style="text-align: center;">.</div>
            </div>

            <div style="margin: 0 15px 0 15px; float: left;">
                Modelo<div style="text-align: center;">.</div>
            </div>        

            <div style="margin: 0 120px 0 15px; float: left;">
                Marca<div style="text-align: center;">.</div>
            </div>
        </div>

        <div style="clear: both; height: 30px;">
            <div style="margin: 0 15px 0 65px; float: left;">
                Seteo nivel investigación<div style="text-align: center;">.</div>
            </div>

            <div style="margin: 0 65px 0 15px; float: left;">
                Seteo nivel intervención<div style="text-align: center;">.</div>
            </div>        
        </div>

        <div style="clear: both; height: 30px;">
            <div style="margin: 0 15px 0 110px; float: left;">
                Última mantención<div style="text-align: center;">.</div>
            </div>

            <div style="margin: 0 110px 0 15px; float: left;">
                Última Calibración<div style="text-align: center;">.</div>
            </div>        
        </div>
    </div>
</div>
<div id="contacto">
    <div class="ficha-monitoreo-borde">
        <div class="ficha-monitoreo-titulo">Contacto</div>
    </div>
    <div class="ficha-monitoreo-contenido-informacion">
        <div style="clear: both; height: 60px;">
            <div style="margin: 0 15px 0 115px; float: left;">
                Jefe instalación<div style="text-align: center;">.</div>
            </div>

            <div style="margin: 0 115px 0 15px; float: left;">
                Correo electrónico<div style="text-align: center;">.</div>
            </div>        
        </div>

         <div style="clear: both; height: 60px;">
            <div style="margin: 0 15px 0 150px; float: left;">
                Teléfono (1)<div style="text-align: center;">.</div>
            </div>

            <div style="margin: 0 150px 0 15px; float: left;">
                Teléfono (2)<div style="text-align: center;">.</div>
            </div>        
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        var s = 0;
        var now = new Date(2000, 1, 1, 0, 20, 0, 0); // 20 min en estado normal
        var plot;
        LoadMediciones();

        var interval = setInterval(StartRemainingTime, 1000);

        setInterval(function () {
            clearInterval(interval);
            s = 0;

            $.ajax({
                type: "POST",
                timeout: 30000,
                url: '@actionUrl',
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    var serie = [];
                    $(data.Mediciones).each(function (i, item) {
                        serie.push([new Date(parseInt(item.Fecha.substr(6))), parseFloat(item.Valor)]);
                    });
                    plot.series[0].data = serie;
                    plot.replot();
                }
            });

            interval = setInterval(StartRemainingTime, 1000);
        }, 12000);
        //1202000); // 20 minutos + 2 seg
        
        function StartRemainingTime() {
            var minutes = now.getMinutes();
            var second = now.getSeconds() - s++;
            var d = new Date(2000, 1, 1, 0, minutes, second, 00);

            $('#remaining-time').text(d.toLocaleTimeString());
        }

        function LoadMediciones() {
            $.ajax({
                type: "POST",
                timeout: 30000,
                url: '@actionUrl',
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    var serie = [];
                    $(data).each(function (i, item) {
                        serie.push([new Date(parseInt(item.Fecha.substr(6))), parseFloat(item.Valor)]);
                    });

                    plot = $.jqplot('chart', [serie], {
                        title: '@fechaFicha.ToString("dddd dd \\de MMMM yyyy")',
                        axesDefaults: {
                            labelRenderer: $.jqplot.CanvasAxisLabelRenderer
                        },
                        grid: {
                            drawBorder: false,
                            shadow: false,
                            background: "#efefef"
                        },
                        axes: {
                            xaxis: {
                                label: 'Eje X',
                                ticks: ['@fechaFicha.ToString("yyyy-MM-dd 00:00:00")',
                                        '@fechaFicha.ToString("yyyy-MM-dd 04:00:00")',
                                        '@fechaFicha.ToString("yyyy-MM-dd 08:00:00")',
                                        '@fechaFicha.ToString("yyyy-MM-dd 12:00:00")',
                                        '@fechaFicha.ToString("yyyy-MM-dd 16:00:00")',
                                        '@fechaFicha.ToString("yyyy-MM-dd 20:00:00")',
                                        '@fechaFicha.ToString("yyyy-MM-dd 23:59:59")'],
                                renderer: $.jqplot.DateAxisRenderer,
                                tickOptions: { formatString: "%H:%M" }
                            },
                            yaxis: {
                                label: 'Eje Y',
                                ticks: [0.0, 1.0, 2.0, 3.0, 4.0, 5.0, 6.0],
                                tickOptions: { formatString: "%s" }
                            }
                        },
                        highlighter: {
                            show: true,
                            showMarker: true,
                            useAxesFormatters: true,
                            formatString: '%s, %s'
                        },
                        canvasOverlay: {
                            show: true,
                            objects: [
                            {
                                horizontalLine: {
                                    name: "nivelInvestigacion",
                                    y: 2,
                                    color: "#FFFF00",
                                    xOffset: 0,
                                    shadow: false,
                                    showTooltip: false,
                                    tooltipFormatString: "Nivel de registro = %d"
                                }
                            }, {
                                horizontalLine: {
                                    name: "nivelIntervencion",
                                    y: 4,
                                    color: "#FF0000",
                                    //lineWidth: 5,
                                    xOffset: 0,
                                    shadow: false,
                                    showTooltip: false,
                                    tooltipFormatString: "Nivel de intervención = %d"
                                }
                            }]
                        }
                    });
                }
            });
        }
    });
</script>
}